<template>
    <div>
        <div class="left">
            <el-menu
                    :default-openeds="openeds"
                    :default-active="this.$router.path"
                    router
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>组件列表</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/transfer">组织结构&人员选择</el-menu-item>
                        <el-menu-item index="/dingTalkTree">钉钉选择抄送人</el-menu-item>
                        <el-menu-item index="/editorTest">富文本组件</el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-upload"></i>
                                <span>文件上传组件</span>
                            </template>
                            <el-menu-item index="/plainUploadTest">普通上传</el-menu-item>
                            <el-menu-item index="/avatarUploadTest">头像上传</el-menu-item>
                            <el-menu-item index="/wallUploadTest">照片墙上传</el-menu-item>
                            <el-menu-item index="/overUploadTest">覆盖默认上传</el-menu-item>
                            <el-menu-item index="/tomatoUploadTest">手动上传</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="/btnGroupTest">按钮组件</el-menu-item>
                        <el-menu-item index="/importTemplateTest">导入/导出</el-menu-item>
                        <el-menu-item index="/captChaTest">验证码组件</el-menu-item>
                        <el-menu-item index="/cascaderTest">联动组件</el-menu-item>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-search"></i>
                                <span>地图组件</span>
                            </template>
                            <el-menu-item index="/cityLlistMap">城市列表地图</el-menu-item>
                            <el-menu-item index="/gpsMap">gps定位地图</el-menu-item>
                            <el-menu-item index="/pointMap">点聚合地图</el-menu-item>
                            <el-menu-item index="/roadBookMap">路书地图</el-menu-item>
                        </el-submenu>
                    </el-menu-item-group>
                    <el-menu-item index="/autoCompleteTest">提示建议</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script>
    import Content from "./Content";
    export default {
        name: "Side",
        components: {Content},
        data() {
            return {
                isCollapse: false,
                openeds: ['1'],
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>